<template>
  <v-card
          max-width="450"
          class="mx-auto"
  >
    <v-toolbar
            color="cyan"
            dark
    >

      <v-toolbar-title>单词本</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-toolbar>

    <v-list three-line>
      <template v-for="(item, index) in items" >
        <v-subheader
                v-if="item.header"
                :key="item.header"
                v-text="item.header"
        ></v-subheader>

        <v-divider
                v-else-if="item.divider"
                :key="index"
                :inset="item.inset"
        ></v-divider>

        <v-list-item
                v-else
                :key="item.title"
                @click="go(item.title)">
          <v-list-item-avatar>
            <v-img :src="item.avatar"></v-img>
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title v-html="item.title"></v-list-item-title>
            <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-list>
  </v-card>
</template>

<script>
  export default {
    name: "List",
    props: {
      items: {
        type: Array,
        default(){
          return []
        }
      }
    },
    methods: {
      go(title){
        if (title == "小学") {
          this.$store.state.wordbook = "小学"
        }else if(title == "初中"){
          this.$store.state.wordbook = "初中"
        }else if(title == "高中"){
          this.$store.state.wordbook = "高中"
        }
        this.$router.push("/wordcontent")
      }
    }
  }
</script>

<style scoped>

</style>